<div class="tab-mission-control">
    <div style="padding-top: 20px;padding-left: 20px; padding-right: 20px;position: relative;">
        <div class="tab_title" data-i18n="tabMissionControl">Mission planer</div>
    </div>
    <div class="content_wrapper">
        <div class="cf_column fourth" id="missionControls">
            <div class="spacer_right">
                <div id="missionPlanerAction" class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title i18n-replaced" data-i18n="missionActionMenuHead">Action Menu</div>
                        <div class="btnMenu btnMenuIcon show_btn"  id="showHideActionButton">
                            <a class="ic_hide" href="#" title="Hide"></a>
                        </div>
                    </div>
                    <div class="spacer" id="ActionContent">
                        
                        <div class="btn save_btn">
                            <a id="loadFileMissionButton" class="btnicon ic_loadFromFile" href="#" title="Load Mission File"></a>
                            <a id="saveFileMissionButton" class="btnicon ic_save2File" href="#" title="Save Mission File"></a>
                        </div>
                        <div class="btn save_btn">
                            <a id="loadMissionButton" class="btnicon ic_loadFromFC" href="#" title="Load mission from FC"</a>
                            <a id="saveMissionButton" class="btnicon ic_save2FC" href="#" title="Save mission to FC"</a>
                            <a id="loadEepromMissionButton" class="btnicon ic_loadFromEprom" href="#" title="Load Eeprom mission"></a>
                            <a id="saveEepromMissionButton" class="btnicon ic_save2Eprom" href="#" title="Save Eeprom mission"></a>
                        </div>
                        <hr>
                        <!-- <div class="btn">
                            <a id="playMissionButton" class="btnicon ic_play" href="#" title="Play mission"></a>
                            <div class="btn-danger">
                                <a id="stopMissionButton" class="btnicon ic_stop" href="#" title="Stop mission"></a>
                            </div>
                        </div>
                        <hr> -->
                        <div id="removeAllPoints" class="btn btn-danger" style="padding-top: 1px; display: inline-block">
                            <a class="btnicon ic_removeAll" href="#" title="Remove all"></a>
                        </div>
                    </div>
                </div>
                <div id="missionPlanerTotalInfo" class="gui_box grey">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title i18n-replaced" data-i18n="missionTotalInformationHead">Total information</div>
                        <div class="btnMenu btnMenuIcon show_btn"  id="showHideInfoButton">
                            <a class="ic_hide" href="#" title="Hide"></a>
                        </div>
                    </div>
                    <div class="spacer"  id="InfoContent">
                        <div id="infoMissionFilename" style="padding-bottom: 2px;">
                            <span>Filename loaded:</span>
                            <span id="missionFilename" style="color: #3394b5"></span>
                        </div>
                        <div id="infoMissionDistance" style="padding-bottom: 2px;">
                            <span>Distance (m):</span>
                            <span id="missionDistance"></span>
                        </div>
                        <div id="infoAvailablePoints" style="padding-bottom: 2px;">
                            <span>Available Points</span>
                            <span id="availablePoints">0/0</span>
                        </div>
                        <div id="infoMissionValid" style="padding-bottom: 2px;">
                            <span>Mission valid</span>
                            <div id="missionValid" style="display: inline-block"></div>
                        </div>
                    </div>
                </div>
                <div id="missionPlanerSettings" class="gui_box grey" style="display: none">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title i18n-replaced" data-i18n="missionDefaultSettingsHead">Default settings</div>
                        <div class="btnMenu btnMenuIcon  save_btn">
                                <a id="cancelSettings" class="ic_cancel" href="#" title="Cancel"></a>
                                <a id="saveSettings" class="ic_save" href="#" title="Save"></a>
                        </div>
                    </div>
                    <div class="spacer">
                        <div class="point">
                            <label class="point-label" for="MPdefaultPointAlt">Alt (cm): </label>
                            <input id="MPdefaultPointAlt" type="text" value="0" required>
                        </div>
                        <div class="point">
                            <label class="point-label" for="MPdefaultPointSpeed">Speed (cm/s): </label>
                            <input id="MPdefaultPointSpeed" type="text" value="0" required>
                        </div>
                        <div class="point">
                            <label class="point-label" for="MPdefaultSafeRangeSH">Radius (m): </label>
                            <input id="MPdefaultSafeRangeSH" type="text" value="0" required>
                        </div>
                    </div>
                </div>
                <div id="missionPlanerSafehome" class="gui_box grey" style="display: none">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title i18n-replaced" data-i18n="missionSafehomeHead">Safe Home manager</div>
                        <div class="btnMenu btnMenuIcon  save_btn">
                            <div id="showHideSafehomeButton">
                                <a class="ic_hide" href="#" title="Hide"></a>
                            </div>
                            <a id="cancelSafehome" class="ic_cancel" href="#" title="Cancel"></a>
                            <a id="saveEepromSafehomeButton" class="ic_save2Eprom" href="#" title="Save Eeprom Safehome"></a>
                            <a id="loadEepromSafehomeButton" class="ic_loadFromEprom" href="#" title="Load Eeprom Safehome"></a>
                        </div>
                    </div>
                    <div class="spacer" id="SafehomeContent">
                        <div>
                            <table class="safehomesTable">
                                <thead>
                                    <tr>
                                        <th style="width: 80px" data-i18n="SafehomeSelected"></th>
                                        <th style="width: 50px" data-i18n="SafehomeId"></th>
                                        <th style="width: 80px" data-i18n="SafehomeEnabled"></th>
                                        <th style="width: 120px" data-i18n="SafehomeLon"></th>
                                        <th style="width: 120px" data-i18n="SafehomeLat"></th>
                                    </tr>
                                </thead>
                                <tbody id="safehomesTableBody">
                                </tbody>
                            </table>
                            <hr>
                            <div class="spacer"  id="safehomeLegend">
                                <span><b>Legend : </b></span>
                                <div class="legendItem">
                                    <span class="fill" style="border-bottom-color:#900C3F"></span>
                                    <span class="textLegend">Max distance (m):</span>
                                    <span id="safeHomeMaxDistance" class="valueLegend"></span>
                                </div>
                                <div class="legendItem">
                                    <span class="fill"></span>
                                    <span class="textLegend">Safe Radius (m):</span>
                                    <span id="SafeHomeSafeDistance" class="valueLegend"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="gui_box grey" id="MPeditPoint" style="display: none">
                    <div class="gui_box_titlebar">
                        <div class="spacer_box_title i18n-replaced" data-i18n="editPointHead">Edit point</div>
                        <div class="btnMenu btnMenuIcon">
                            <div id="showHideWPeditButton"   class="save_btn">
                                <a class="ic_hide" href="#" title="Hide"></a>
                            </div>
                            <div id="removePoint" class="btnMenu-danger">
                                <a class="ic_removeAll" href="#" title="Remove"></a>
                            </div>
                        </div>
                    </div>
                    <div class="spacer" id="WPeditContent">
                        <input type="hidden" name="pointNumber" value="">
                        <div class="point">
                            <label class="point-label" for="pointType">Type: </label>
                            <select name="type" id="pointType">
                                <!--<option value="1">Home</option>-->
                                <option value="1">Waypoint</option>
								<!-- <option value="2">PH_UNLIM</option> -->
								<option value="3">PH_TIME</option>
								<!--<option value="4">RTH</option>-->
								<option value="5">POI</option>
								<!--<option value="6">Jump</option>
								<option value="7">Heading lock</option>-->
								<option value="8">Land</option>
                            </select>
                        </div>
                        <div class="point">
                            <label class="point-label" for="pointLat">Lat: </label>
                            <input id="pointLat" type="text" value="0.0" required>
                        </div>
                        <div class="point">
                            <label class="point-label" for="pointLon">Lon: </label>
                            <input id="pointLon" type="text" value="0.0" required>
                        </div>
                        <div class="point">
                            <label class="point-label" for="pointAlt">Alt (cm): </label>
                            <input id="pointAlt" type="text" value="0" required><span id="altitudeInMeters"></span>
                        </div>
                        <div class="point" id="pointP3class" style="display: none">
                            <label class="point-label" for="pointP3">Parameter 3: </label>
                            <input id="pointP3" type="checkbox" value="0" class="togglemedium" checked required>
                        </div>
                        <div class="point" id="pointP1class" style="display: none">
                            <label class="point-label" for="pointP1">Parameter 1: </label>
                            <input id="pointP1" type="text" value="0" required>
                        </div>
						<div class="point" id="pointP2class" style="display: none">
                            <label class="point-label" for="pointP2">Parameter 2: </label>
                            <input id="pointP2" type="text" value="0" required>
                        </div>
                        <div>
                        <table class="waypointOptionsTable">
                            <thead>
                                <tr>
                                    <th style="width: 30px">
                                        <div id="addOptionsPoint" class="btnTable btnTableIcon btnTable-success">
                                            <a class="ic_add" data-role="waypointOptions-add" href="#" style="float: center" title="Add"></a>
                                        </div>
                                    </th>
                                    <th style="width: 50px" data-i18n="WaypointOptionId"></th>
                                    <th style="width: 80px" data-i18n="WaypointOptionAction"></th>
                                    <th style="width: 120px" data-i18n="WaypointOptionP1"></th>
                                    <th style="width: 120px" data-i18n="WaypointOptionP2"></th>
                                </tr>
                            </thead>
                            <tbody id="waypointOptionsTableBody">
                            </tbody>
                        </table>
                        </div>
                        
						<!-- <div class="point-radio" id="pointOptionclass" style="display: none">
							<div class="radio-line">
								<input type="radio" id="Options_None" name="Options" value="None" checked>
								<label class="radio-options" for="Options_None">None</label><br>
							</div>
							<div class="radio-line">
								<input type="radio" id="Options_RTH" name="Options" value="RTH">
								<label class="radio-options" for="Options_RTH">RTH</label>
								<input type="checkbox" id="Options_LandRTH">
								<label for="Options_LandRTH">Land after RTH</label><br>
							</div>
							<div class="radio-line">	
								<input type="radio" id="Options_JUMP" name="Options" value="JUMP">
								<label class="radio-options" for="Options_JUMP">JUMP</label>
								<label for="Options_TargetJUMP">Target WP: </label>
								<input id="Options_TargetJUMP" type="text" value="0" required>
								<label for="Options_NumberJUMP">Repeat: </label>
								<input id="Options_NumberJUMP" type="text" value="0" required><br>
							</div>
							<div class="radio-line">	
								<input type="radio" id="Options_HEAD" name="Options" value="SET_HEAD">
								<label class="radio-options" for="Options_HEAD">HEAD</label>
								<label for="Options_HeadingHead">Heading: </label>
								<input id="Options_HeadingHead" type="text" value="-1" required><br>
							</div>
                        </div> -->
						
                    </div>
                </div>
            </div>
        </div>
        <div class="cf_column threefourth_left">
            <div style="height:100%" id="missionMap"></div>
            <div id="notLoadMap" data-i18n="useOnlyStandalone" style="display: none;"></div>
        </div>
    </div>
</div>
